<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="5">
            <a-form-item label="模型名称" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <j-input placeholder="请输入模型名称" v-model="queryParam.topicName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="5">
            <a-form-item label="描述" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <j-input placeholder="请输入描述" v-model="queryParam.topicDesc"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="5">
            <a-form-item label="接口服务编码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <j-input placeholder="请输入接口服务编码" v-model="queryParam.serviceCode"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="5">
            <a-form-item label="所属专题" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-tree-select 
                :getPopupContainer="(triggerNode) => triggerNode.parentNode" 
                placeholder="请选择所属专题"
                style="width: 100%;" 
                :replaceFields="TopicReplaceFields"
                :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }" 
                :treeData="topicTypes"
                @select="select"
                v-model="queryParam.topicType">
              </a-tree-select>
            </a-form-item>
          </a-col>


          <a-col :md="8" :sm="5">
            <a-form-item label="存储数据表" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <j-input placeholder="请输入存储数据表" v-model="queryParam.topicTable"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="10">
            <a-button type="primary" @click="searchQueryBefore" icon="search">查询</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="searchReset" icon="reload">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAddModal">新增</a-button>
      <a-button type="primary" icon="delete" @click="batchDel">批量删除</a-button>
      <j-super-query :fieldList="superQueryFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery" />
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
        项
        <a style="margin-left: 24px" @click="onClearSelected">取消勾选</a>
      </div>

      <a-table ref="table" size="middle" bordered :scroll="{ x: true }" rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
        <span slot="topicCols" slot-scope="topicCols">
          <div style="float: left" v-for="(topic, index) in topicCols" :key="index">
            <a-tag style="font-size: 14px; margin-top: 5px" v-if="topic.isIndex === '0'" color="blue">{{
              topic.columnComment
            }}</a-tag>
          </div>
        </span>

        <span slot="serviceStatus" slot-scope="serviceStatus">
          <span :style="{ color: serviceStatus === '1' ? 'green' : 'red' }">{{
            serviceStatus === '1' ? '启用' : serviceStatus === '2' ? '停止' : '--'
          }}</span>
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEditIndex(record.id)">编辑</a>
          <a-divider type="vertical" />

          <div style="display: inline-block; width: 85px; text-align: left; padding-left: 5px">
            <a @click="handleDesign(record, record.id)">模型固化</a>
            <a-tooltip>
              <template slot="title">未配置模型固化</template>
              <a-icon type="exclamation-circle" theme="twoTone" style="margin-left: 5px; cursor: pointer"
                two-tone-color="#EA5455" v-if="record.hasWrite === '0'" />
            </a-tooltip>
          </div>
          <a-divider type="vertical" />

          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm placement="topLeft" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleViewData(record)">查看数据</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <TopicAddModal ref="addModal" v-if="addFlag" :modalVisible="addFlag" @close="handleClose" />
    <TopicWriteModal ref="addBuildWriteModal" v-if="addWriteFlag" :modalVisible="addWriteFlag" pageFlag="build"
      :currentId="currentKey" :record="currentRecord" @close="handleWriteClose" />
    <TopicEditModal ref="addEditModal" v-if="editFlag" :modalVisible="editFlag" :currentId="editKey"
      @close="handleEditClose" />
    <DataEdit ref="dataEdit" />
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TopicAddModal from './modules/TopicAddModal'
import TopicEditModal from './modules/TopicEditModal'
import TopicWriteModal from './modules/TopicWriteModal'
import JInput from '@/components/jeecg/JInput.vue'
import DataEdit from '@/views/data-edit/DataEdit'

import { getAction } from '@/api/manage'

export default {
  name: 'ScSituationIndexTopicList',
  components: {
    TopicAddModal,
    TopicEditModal,
    TopicWriteModal,
    JInput,
    DataEdit
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      // 表头
      columns: [
        {
          title: '模型名称',
          align: 'center',
          dataIndex: 'topicName'
        },
        {
          title: '模型描述',
          align: 'center',
          dataIndex: 'topicDesc'
        },
        {
          title: '维度信息',
          align: 'left',
          dataIndex: 'topicCols',
          scopedSlots: { customRender: 'topicCols' }
        },
        {
          title: '存储数据表',
          align: 'center',
          dataIndex: 'topicTable'
        },
        {
          title: '接口服务编码',
          align: 'center',
          dataIndex: 'serviceCode'
        },
        {
          title: '接口服务状态',
          align: 'center',
          dataIndex: 'serviceStatus',
          scopedSlots: { customRender: 'serviceStatus' }
        },
        {
          title: '编辑人',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '编辑时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 240,
          scopedSlots: { customRender: 'action' }
        }
      ],
      superQueryFieldList: [
        { type: 'input', value: 'topicTable', text: '存储数据表' },
        { type: 'input', value: 'serviceCode', text: '接口服务名称' },
        { type: 'select', value: 'serviceStatus', text: '接口服务状态', dictCode: 'service_status' },
        { type: 'input', value: 'createBy', text: '创建人' },
        { type: 'datetime', value: 'createTime', text: '创建时间' }
      ],
      url: {
        list: '/topic/config/pageTopic',
        delete: '/topic/config/deleteTopic',
        deleteBatch: '/topic/config/batchDeleteTopic'
      },
      addFlag: false,
      addWriteFlag: false,
      currentKey: '',
      currentRecord: '',
      editFlag: false,
      editKey: '',
      TopicReplaceFields: {
        children: 'childList',
        title: 'catalogName',
        key: 'id',
        value: 'id'
      },
      topicTypes: []
    }
  },
  created() {
    this.getTopicTypes()
  },
  methods: {
    getTopicTypes() {
      this.topicTypes = []
      getAction('/index/config/queryIndexCatalog', {}).then((res) => {
        if (res.success) {
          this.topicTypes = res.result
        }
      })
    },
    searchQueryBefore() {
      this.searchQuery()
    },
    select(){},
    /**
     * @description 添加modal框关闭
     * @returns void
     */
    handleClose(flag) {
      this.addFlag = false
      // 调用查询接口更新查询数据
      if (flag) {
        this.loadData(1)
      }
    },

    /**
     * @description 添加操作
     * @returns void
     */
    handleAddModal() {
      this.addFlag = true
    },

    /**
     * @description 模型固化关闭
     * @returns void
     */
    handleWriteClose(flag) {
      this.addWriteFlag = false
      if (flag) {
        // 调用查询接口更新查询数据
        this.loadData(1)
      }
    },

    /**
     * @description 模型固化操作
     * @param {*} record
     * @param {*} id
     * @returns void
     */
    handleDesign(record, id) {
      this.addWriteFlag = true
      this.currentKey = id
      this.currentRecord = record
    },

    /**
    * @description 编辑modal框关闭
    * @returns void
    */
    handleEditClose(flag) {
      this.editFlag = false
      if (flag) {
        // 调用查询接口更新查询数据
        this.loadData(1)
      }
    },

    /**
     * @description 编辑操作
     * @param {*} id
     * @returns void
     */
    handleEditIndex(id) {
      this.editFlag = true
      this.editKey = id
    },

    /**
    * @description 查看数据
    * @param {Ojbect} record
    * @returns viod
    */
    handleViewData(record) {
      this.$refs.dataEdit.handleOpenData(record,
        {
          dataSource: record.dataSourceCode,
          serviceCode: record.serviceCode,
          tableName: record.tableName
        }
      )
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less"></style>
